<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            height: 500px;
            width: 500px;
            margin: auto;

        }

        .box .ti {
            width: 100px;
            height: 30px;
            margin: auto;


        }

        .box .ti p {
            font-size: 20px;
            text-align: center;
        }

        .box button {
            margin-left: 44%;
            cursor: pointer;
            background-color: bisque;
            border: 8px solid bisque;

        }

        .box .zi {
            height: 450px;
            width: 450px;
            margin: auto;
            border: 1px solid red;
            cursor: pointer;
        }

        ul {

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            padding: 15px;
        }

        ul li {

            height: 40px;
            width: 40px;
         
            text-align: center;
            line-height: 40px;
            border-radius: 10px;
           

        }
        li:hover{
            transform: scale(1.2);
        }


        .box .kong {
            width: 100px;
            height: 30px;
            margin: auto;
            border: 1px solid rgb(218, 120, 120);
            font-size: 20px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="ti">
            <p></p>
        </div>
        <div class="kong">
        </div>
        <button>换一个</button>
        <div class="zi">


        </div>
    </div>
    <script>
        let arr = ['醍醐灌顶', '娉婷袅娜', '魑魅魍魉', '涕泗滂沱', '沆瀣一气', '水沝淼㵘', '犄角旮旯', '又双叒叕', '龙行龘龘'];
        var str = '';
        for (let i = 0; i < arr.length; i++) {
            str = str + arr[i]
        }
        var zi = document.querySelector('.box > .zi');
        for (let i = 0; i < 6; i++) {
            zi.innerHTML += `
            <ul>
            <li style = "box-shadow: 0 0 4px 0 ${rgb()};"></li>
            <li style = "box-shadow: 0 0 4px 0 ${rgb()};"></li>
            <li style = "box-shadow: 0 0 4px 0 ${rgb()};"></li>
            <li style = "box-shadow: 0 0 4px 0 ${rgb()};"></li>
            <li style = "box-shadow: 0 0 4px 0 ${rgb()};"></li>
            <li style = "box-shadow: 0 0 4px 0 ${rgb()};"></li>
            </ul>`
        }

        function daluan() {
            var arr = [];//存放随机数的数组
            for (let j = 0; j < 1000; j++) {

                var radomNum = parseInt(Math.random() * 36);//生成范围内的数据数
                if (arr.indexOf(radomNum) == -1) {

                    //indexOf返回值为-1表示数组中没有和新随机数重复的值
                    arr.push(radomNum);
                    if (arr.lenght == 36) break;
                }
            }
            return arr;
        }
        var num = daluan();
        var lis = document.querySelectorAll('.box > .zi > ul > li');
        for (let i = 0; i < lis.length; i++) {

            lis[num[i]].innerText = `${str[i]}`;
        }

        function rgb() {
            var r = parseInt(Math.random() * 255);
            var g = parseInt(Math.random() * 255);
            var b = parseInt(Math.random() * 255);
            return `rgb(${r},${g},${b})`;
        }


     
        let index = 0;
        function nextPhrase() {
            let ps = document.querySelector(".box > .ti > p");
            ps.innerHTML = `${arr[index++]}`
            let btn = document.querySelector('.box >button');
            
            btn.addEventListener('click', function () {
                ps.innerHTML = `${arr[index++]}`;
                daluan()
                if (index > 8) {
                    index = 0;
                }
                document.querySelector('.box > .kong').innerText = ''
            })
        }
        
        nextPhrase();
        let kong = document.querySelector('.box > .kong');
        for (let i = 0; i < lis.length; i++) {
            lis[i].addEventListener('click', function (e) {
                console.log(e.path[0].childNodes[0].data[0]);
                kong.innerText += e.path[0].childNodes[0].data[0]
                let length = document.querySelector('.box > .kong').innerText.length;
                if (length == 4) {
                    let text1 = document.querySelector('.box > .ti > p').innerText;
                    let text2 = document.querySelector('.box > .kong').innerText;
                    setTimeout(function () {
                        if (text1 == text2) {
                            alert('答对了');
                            daluan()
                            nextPhrase()

                            document.querySelector('.box > .kong').innerText = ''
                        } else {
                            alert('再接再厉');
                            daluan()
                            document.querySelector('.box > .kong').innerText = ''
                        }
                    }, 100)
                }
            })
        }
    </script>
</body>

</html>